Approved font direction: swap the design-system typeface and the auth
layout's webfont link from Inter to Figtree (warmer humanist sans).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- design.md: living design-system doc (Tailwind v4 approach, Figtree type scale,
  color tokens, icon-tile pattern, component + empty-state specs, app-shell spec,
  migration checklist). Codifies the icon-tile treatment (icons on a soft colored
  background) for stat/status icons and reserves initial-avatars for people only.
- CLAUDE.md: point to design.md and record the casadesign commit/push-per-checkpoint
  workflow.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

New Tailwind-only layout: left sidebar with Pundit-guarded nav mirroring the
existing routes, plus a top bar (notifications, profile menu, sign out). Coexists
with the Bootstrap `application` layout — redesigned authenticated pages opt in via
`layout "casa_app"`. Icons via Bootstrap Icons CDN + Figtree (per design.md).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Supervisors now land on a real dashboard (DashboardController#show renders it in the
casa_app shell) instead of the Bootstrap volunteers table:

- SupervisorDashboard service builds per-volunteer follow-up status + summary stats
  from the supervisor's assigned volunteers.
- View: KPI cards, a "Needs your attention" list (icon-tile treatment per design
  feedback — replaces the ringed avatars), and a roster with color-coded
  contact-status pills.
- Empty states handled: no volunteers -> welcome + CTAs; nobody behind -> all
  caught up. The full volunteer management table remains at /volunteers.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Feedback from design review:
- Avatar initials strip honorific prefixes (Mrs./Mr./…) and use first + last name
  only, via a shared `avatar_initials` helper (removed the duplicate in the service).
- Top-bar profile menu is triggered by the avatar alone; the name lives in the
  dropdown, not the trigger.
- Page header is the page name ("Dashboard") + <title>, not a greeting.

Accessibility (WCAG AA targets):
- Skip-to-content link, landmark labels, aria-labels on icon-only controls,
  aria-current on the active nav item, table scope + sr-only caption, visible
  focus rings, contrast bumps (slate-400 -> 500/600), role=status/alert on flash.

Responsive:
- Sidebar becomes an off-canvas drawer below lg with an accessible toggle
  (button + aria-expanded, Escape/backdrop to close) and a responsive grid/padding.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Names now render as first + last only (no Mr./Mrs./...) wherever a person is shown
in the redesign — the shell sidebar/profile menu and the supervisor dashboard
(names and aria-labels), plus the avatar initials.

- New `NamePresentation.strip_honorific` + a `display_person(user)` view helper.
- Presentation-only: the stored `display_name` is left untouched. (An attempted
  `User#display_name` override was reverted — a security spec requires display_name
  to round-trip raw input unchanged, e.g. dangerous strings.)
- Documented in design.md + CLAUDE.md so it's applied on every page going forward.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

The bottom-of-sidebar user block (avatar + name + role) duplicated the identity
already shown by the top-right avatar account menu, and was non-interactive. Drop
it; the top-right menu is the single source for identity + account actions.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

The "CV" placeholder brand mark wasn't a value-add at 36px (the org name already
identifies the chapter) and using the real org logo there would add image/variant
infrastructure for little gain. Show the org name alone in the sidebar header; the
full logo stays for contexts with room (sign-in, court reports). design.md updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Bring the rest of the auth flow in line with the redesigned sign-in:
- Forgot password (passwords/new), reset password (passwords/edit), and
  accept-invitation (invitations/edit) rebuilt in Tailwind, matching the sign-in's
  inputs/buttons/error styling. CASA's email-or-phone reset is preserved.
- Users::PasswordsController uses `layout "casa_auth"`; the invitation-accept action
  renders in casa_auth (admin invite `new`/`create` untouched).
- casa_auth `<title>` is now driven by `content_for(:page_title)`; each page sets its
  own title (Sign in / Reset your password / Choose a new password / Accept your invitation).

Verified all three render 200 in the new layout (accept-invitation via a valid token).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Apply the honorific-free naming rule to the existing Bootstrap UI, not just the
redesign:
- 37 `.display_name` person-name sites across ~20 legacy views now render via the
  `formatted_name` helper (org names, form-value symbols, and the checkbox-id slug
  line were intentionally excluded).
- The 4 DataTables (volunteer, supervisor, case-contact, reimbursement) strip
  honorifics on their Ruby name outputs (display_name + supervisor_name); SQL
  select/order strings are untouched.
- Added a `formatted_name(name)` string helper alongside `display_person`, both
  backed by `NamePresentation`.

Verified /supervisors, /volunteers, /casa_cases render 200 with zero honorifics;
datatable classes load clean; standardrb + rendering green. Docs updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

The header helper text becomes a short single sentence with no em-dash; the org
name already appears in the sidebar header, so it's no longer repeated here.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…app shell

First page-by-page migration off the legacy Bootstrap UI, following design.md.
The notifications page is linked straight from the new shell (top-bar bell +
account menu), so it was the most visible remaining Bootstrap seam.

- Render NotificationsController#index in the casa_app layout.
- Restyle the index, NotificationComponent, and patch-notes partial onto the
  design system: card list, leading icon tiles, unread dot, and a cold-start
  empty state. Switch Font Awesome (fas fa-*) to Bootstrap Icons (bi-*), which
  is the icon set actually loaded on Tailwind pages.
- Move the specs off Bootstrap-class selectors onto semantic data-* hooks
  (data-notification-list-item, data-read / data-unread-dot) without weakening
  behavior coverage. All notification/patch-note ordering, counts, and empty
  states remain asserted.

Verified: component, view, request (renders the full casa_app layout), and
system specs all pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

… backlog

- design.md: reframe as the permanent source of truth to refer to for all UI
  work. Add a "Design decisions (rationale)" log capturing the why behind the
  system (Tailwind-alongside-Bootstrap, layout opt-in, indigo/slate, Figtree,
  bi-* icons, icon-tile-vs-avatar, org-name-only sidebar, presentation-only
  honorific stripping, triage dashboards, empty-state taxonomy, a11y bar,
  build/output), a repeatable "Migrating a page" playbook, and a migration
  status that points at the backlog.
- design-todo.md: new prioritized, phased backlog (the "what's left") for the
  page-by-page migration off Bootstrap, plus cross-cutting infra and known
  pre-existing debt.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…rofile done

Add the two components introduced by the edit-profile migration (the Tailwind
form-error summary and the disclosure/collapsible-panel pattern) to design.md,
and tick edit profile in both the design.md status and design-todo.md.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…rd subtitle

- Add a role badge (current_role as a brand-tinted pill) to the casa_app account
  menu header, under name + email — the one place identity metadata lives, and a
  parity with the role line the legacy header used to show. Industry-standard
  placement for a multi-role internal tool (keeps the sidebar/top-bar chrome clean).
- Supervisor dashboard subtitle -> "Track volunteer progress at a glance."
- Document the role badge in design.md.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

The person-badge icon added no signal, so remove it. Colour the pill by role
using the design system's non-semantic accent tints — Volunteer = sky (blue),
Supervisor = violet (purple), Casa Admin = amber — so roles read apart at a
glance; unknown roles fall back to slate.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…pt WCAG AA

- Drop the shouty `uppercase` transform from all design-system labels (account
  details, dashboard + languages table headers, patch-note category, auth "or"
  divider); render them sentence case. Sentence-case isolated copy ("My
  languages", "Learning hours this year").
- Bump muted label text from slate-400 (fails AA) to slate-500/600 for contrast.
- Redesign the form-error summary (shared/_form_errors): a role="alert" card with
  a leading icon and a tidy bulleted list instead of the plain block; keeps the
  heading text + #error_explanation so specs and behavior are unchanged.
- design.md: add Sentence case + Accessibility (WCAG 2.1 AA) as standing
  conventions, and fix the muted-text token. design-todo: track the app-wide
  interactive-label sentence-case pass and a slate-400 contrast audit.

Interactive button/field labels shared across pages (Update Profile, Change
Password, field labels) are spec-coupled across users/volunteers/all-casa-admin
and a shared example, so they're deferred to a holistic pass (tracked).

Verified: 109 examples across the touched pages pass; erb-lint clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Per design feedback: one sentence, no bullets, dashboard-style icon tile.
- shared/_form_errors now renders "Unable to save: <messages via to_sentence>"
  inside a rose danger icon tile (bg-rose-100 text-rose-600, bi-exclamation-
  triangle) matching the dashboard, dropping the old heading + bulleted list.
- Update edit_spec assertions from the Rails "N errors prohibited this X from
  being saved:" text to "Unable to save".
- design.md: refresh the Form errors component note.

Verified: 79 users edit + request examples pass; erb-lint clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Promotes the throwaway sweep script to a tracked, self-launching tool so
the migration playbook's verification step is actually followable. It
spawns headless Chrome, drives it over the DevTools Protocol with
Emulation.setDeviceMetricsOverride (which forces the real viewport width,
unlike `--window-size`, clamped to ~500px), and reports page fit plus the
widest element whose rendered right edge overruns the viewport at each
width. Point the design.md and design-todo.md references at it.

Usage: bin/measure-responsive.mjs [w,w,...] <file.html> [file.html ...]

CaseContact's occurred_at future cutoff is now a lambda, so it is
evaluated per validation instead of frozen at class-load time. The old
form captured `Time.zone.tomorrow + 1.day` once, so if the model first
loaded while a spec was time-travelled to the past, the cutoff froze and
unrelated later specs failed with "can't be in the future". Added a
travel_to regression guard that fails against the old class-load capture.

Added a SupervisorDashboard service spec (the supervisor landing built
this session had no unit coverage): #volunteers is active-assignments
only, the :no_cases / :on_track / :follow_up statuses, #needs_attention,
#stats (roster counts plus recent hours), and the Row label / hours /
avatar helpers.

Phase A of the Case show migration (reusable infra; no page flip yet).

- add-to-calendar: hydrates the add-to-calendar-button web component from
  data values on connect, the Stimulus replacement for the legacy jQuery
  div.cal-btn sweep (which stays for un-migrated pages). It uses a distinct
  data-controller hook so the two never double-hydrate, and hydrating on
  connect keeps it Turbo-safe. Jest-tested via a mounted Stimulus app.
- modal: a native <dialog> wrapper (open / close / backdrop-close) for the
  report-generation and thank-you modals, replacing the Bootstrap modal
  components on the Tailwind layout. Focus trap, Escape-to-close, and an
  inert background come from <dialog> itself, so there is no bespoke key or
  focus handling to maintain.

Phase A (continued). A show-specific Tailwind case-contact card and its
follow-up control, plus CaseContactDecorator#medium_icon (a bootstrap-icons
variant of medium_icon_classes, since casa_app loads bootstrap-icons rather
than the legacy LineIcons font).

The card is deliberately separate from the shared case_contacts/_case_contact
partial (still Bootstrap, used by the un-migrated contacts index / drafts /
form); it will be consolidated when those pages migrate. It keeps the
.followup-button and followup-button-<id> hooks so the existing jQuery reminder
prompt still binds, and exposes a data-case-contact hook for the show spec's
count. It is wired into the page in Phase B.

Phase C infra: the Stimulus pieces the migrated report-generation flow needs,
so the upcoming page flip has no jQuery or Bootstrap-modal dependency.

- court-report: posts the date range to the JSON endpoint (Rails wraps the flat
  body under case_court_report), shows a spinner, and opens the docx in a new
  tab. Replaces the legacy handleGenerateReport, which toggled Bootstrap d-none
  and listened for .bs.modal events.
- local-storage-reset: clears a localStorage key on connect, discarding the
  saved case-contact draft on the success redirect. Jest-tested.
- modal: an openOnConnect value, so the thank-you dialog can auto-open on the
  success redirect.

Flip casa_cases#show onto casa_app with a Tailwind rebuild: header actions, a
"Case details" fact card (transition, date in care, next court date with
add-to-calendar, court report status + download, court orders, placement), a
court dates card, assigned volunteers with the reminder form, and the
case-contact list using the new Tailwind card.

The report-generation modal is now a native <dialog> driven by the modal +
court-report Stimulus controllers, and the thank-you dialog auto-opens on the
success redirect (clearing the saved draft), so the page no longer needs
Bootstrap modal CSS or the inline <script>. Add-to-Calendar buttons use the
add-to-calendar controller.

Show-specific partials (contact card, reminder form) avoid mutating the shared
Bootstrap partials still used by un-migrated pages. Existing label text is kept
so content specs stay green; specs coupled to the old markup are updated: the
report-modal hooks, the .card-content count becomes data-case-contact, and the
"CASA Case Details" / "Case number:" markers become the new h1 and section title.

White text on emerald-600 was 3.77:1 (fails AA for text); emerald-700 is
5.48:1. Bumped the resolve-reminder button background to emerald-700
(hover emerald-800). Measured with the WCAG contrast formula.

design-todo.md: mark Case show migrated (approach, infra added, and the
follow-up to consolidate the show-specific contact card / reminder form when
the contacts index and volunteers-edit migrate); note the now-orphaned
_generate_report_modal in the dead-code cleanup item.
design.md: add the Modal (native dialog) component pattern.

Case groups (index, form, controller) move to the casa_app Tailwind layout,
with a TomSelect theme so the multiselect matches the design system on casa_app.

Establish two shared tokens so styling stops drifting:

- button_classes(:primary | :secondary | :danger) in DesignSystemHelper is the
  single source of truth for buttons, replacing five copy-pasted class locals.
  Every variant shares a fixed h-10 (40px) height, so box-sizing: border-box
  absorbs the outlined variant's 1px border and all variants are the same height
  by construction, with no fragile border border-transparent compensation.

- One native-<dialog> modal template: header (optional 32px status badge, title,
  close), divider, body, divider, right-aligned footer. The delete confirm
  (shared/_confirm_button), the court-report modal, and the success dialog now
  share it. The status icon is one rounded-full badge in two sizes (32px inline,
  48px hero). tailwind.css re-centers the dialog because Tailwind's reset drops
  the browser's centering margin.

WCAG: the modal close icon moves from slate-400 (2.56:1) to slate-500 (4.76:1).

Specs: a DesignSystemHelper#button_classes unit spec and a case-groups
delete-via-confirmation-dialog system test. design.md documents both tokens.

The court-report, success, and delete-confirm modals were three copies of the
same inline <dialog> markup: the same drift the button token just fixed. Fold
the template into a Dialog:: ViewComponent suite (the native-dialog counterpart
to the Bootstrap Modal:: suite):

- Dialog::GroupComponent: the <dialog> shell (trigger slot, size, aria label,
  modal controller wiring, extra controllers, open-on-connect, extra data).
- Dialog::HeaderComponent: optional status badge, title, and close button.
- Dialog::BodyComponent: panel or centered status body, with extra classes.
- Dialog::FooterComponent: a divided action row, end- or center-aligned.

Header/body/footer render as standalone components so they compose even when a
form_with wraps them (the court-report modal). shared/_confirm_button and the
two case-show modals now use the suite; markup and geometry are unchanged
(verified centered, 40px buttons, 32px badges). Specs cover all four components,
and design.md documents the suite.

The case-show header was a flat row of up to five buttons. Adopt the cases
index's header pattern: one primary CTA plus a More overflow menu.

- New Case Contact (primary), Edit Case Details, and Emancipation (when the
  youth is transition-aged) stay visible; Generate Court Report and New Fund
  Request move into a More disclosure (native <details> + the dropdown
  controller), matching the index.
- Core actions stay visible on purpose: burying Edit or Emancipation would cost
  a click on common actions and break non-JS specs, since rack_test cannot open
  a native <details>.
- Dialog::GroupComponent gains a wrapper_class option; "contents" lets the
  court-report modal's trigger and dialog drop straight into the menu as an
  item. The report modal is extracted to casa_cases/_court_report_modal.
- Menu-item leading icons top-align to the first line (items-start).
- The index's More summary now uses button_classes(:secondary), matching the
  40px primary and fixing a height mismatch introduced by the button token.

design.md and CLAUDE.md document the header pattern and the icon alignment.

The header keeps New Case Contact (primary) and Edit Case Details visible and
now overflows Generate Court Report, Emancipation, and New Fund Request into the
More menu.

The emancipation-link check becomes :js and opens More first, since the link now
lives in the native <details> menu. design.md updated to match.

On phones the header wrapped into a messy multi-row of buttons. Now only the
primary CTA and More share the top line; Edit collapses into More below sm.

Edit renders twice with responsive visibility: a button wrapped in
hidden sm:contents (sm+) and a sm:hidden menu item (mobile). It stays no-JS,
is unambiguous (one visible Edit at any width), and the non-JS Edit test still
finds the visible button. design.md and CLAUDE.md document the pattern.

casa_cases#new and create now render on casa_app with a Tailwind form:

- Two-column responsive grid: case number and contact types span full width;
  dates, court report status, and assign volunteer take one column each. A single
  bottom "Create case" submit (no top CTA), and the design-system select pattern
  (appearance-none + chevron), with month/year pickers via
  casa_cases/_month_year_select.
- Contact-types multiselect themed for casa_app: a chevron, brand-100 chips each
  with a visible x (the LineIcons x and grey divider are overridden), flip-up when
  the control is near the viewport bottom (multiple-select controller), and the
  "select all" sentinel chip and the always-"never" last-used subtext hidden on a
  new case.
- Validation: invalid fields get a rose-500 border (.field_with_errors) alongside
  the shared/_form_errors summary card.
- Volunteer options are honorific-free.

edit and the shared _form stay on Bootstrap until Stage 2. design.md documents
the form-layout, select, multiselect, and validation patterns; CLAUDE.md records
that approved components are documented in design.md and reused from there.

- New/edit forms: lift the "Court details" section heading and the case
  number out of the uniform-gap grid so the heading hugs its fields (12px)
  instead of floating with the 20px inter-field gap.
- Volunteers: replace the shared Bootstrap manage_volunteers table with a
  self-contained Tailwind card list, design-system status pills
  (Assigned/Unassigned/Deactivated, all AA), and a themed assign form.
- Court orders + court dates: casa_app-specific Tailwind partials
  (shared/court_order_list stays for the Bootstrap court-date pages),
  preserving the nested-form, copy-from-sibling, and add/remove hooks.
- Deactivate moves to a Dialog confirm in its own danger zone outside the
  edit form; inactive case gets a Tailwind view.

edit_spec 46/46 green; mobile has no horizontal overflow; contrast is AA.
design.md and CLAUDE.md updated with the new patterns.

The court-orders sub-form now confirms removing a persisted order through
the design-system native <dialog> (opened programmatically by the
court-order-form controller, centered by the modal controller) instead of
SweetAlert. New unsaved rows still remove without a prompt; copy-from-sibling
keeps its own confirm for now.

edit_spec 46/46 green. design.md documents the programmatic-open pattern.

The casa_app copy-from-sibling flow is now a small copy-court-orders Stimulus
controller: it enables the button once a case is picked, confirms through the
design-system <dialog>, PATCHes copy_court_orders, and reloads. The action sets a
flash so the "Court orders have been copied" message survives the reload. The
legacy casa_case.js SweetAlert and the shared Bootstrap partial are left untouched
for the court-date pages.

edit_spec 46/46 green (aside from one pre-existing flaky volunteer :js test that
passes in isolation). design.md updated.

- Send Reminder now uses button_classes(:secondary) so it matches Add a court
  date; it was a hand-written brand-outline string at a smaller height.
- Youth's date in care no longer reads light-dark-light: the derived duration
  moves to a muted second line and is reworded from "(over 8 years ago)" to
  "In care for over 8 years" so its meaning is clear.

show, show_more, new, and edit specs green.

- Send Reminder is now a Dialog confirm (the Send CC option lives inside it)
  and returns to the case after sending, not the volunteer edit page.
- Convert every remaining hand-rolled button on the case pages to
  button_classes: Reactivate, Filter, case-contact Edit/Delete, and the
  followup Make/Resolve Reminder. Add a :success variant (emerald-700, AA)
  for Resolve.
- Court Report Status derived info moves to a muted second line (same fix as
  date-in-care) so it no longer reads light-dark-light.
- design.md and CLAUDE.md document the two new variants and a pre-ship audit
  step to catch hand-written button styling.

show, show_more, followups, and case-contact specs green.

…pography

- Drop the trailing colons and Title Case from section subtitles: "Assigned
  Volunteers:" -> "Assigned volunteers", "Current Placement:" -> "Current
  placement", "Court Orders" -> "Court orders". Colons stay only on inline
  key:value fact labels.
- Volunteer name is now dark identifying text (slate-800, hover underline)
  instead of a brand hyperlink, so it reads as a name, not a nav link.
- Current placement value uses the same slate-800 as other fact values; the
  grey "Unknown" is the muted empty-state convention, kept.
- design.md + CLAUDE.md: no-colon-on-headings rule (with an audit grep) and a
  person-name typography/link convention.

show and show_more specs green.

- The contact-types multiselect now loads blank with a "Select or search contact
  types" placeholder instead of pre-selecting every option; the dropdown's
  Select/Unselect all still selects everything. Contact types is required (an
  at-least-one validation), so blank plus placeholder is the correct required-field UX.
- The dropdown chevron is now the real bi-chevron-down icon injected by the
  controller, matching the single-selects. The previous CSS ::after content glyph
  was silently dropped by the CSS minifier, which is why the chevron looked missing
  despite the rule being present.
- design.md and CLAUDE.md document both (blank-by-default multiselect, injected chevron).

new and edit specs green.

The chevron was rendering all along but painted behind TomSelect's opaque
.ts-control, so it needed z-index. Root-caused by pixel inspection (computed
style reported the element present while nothing actually painted, which is why
every prior attempt looked done but showed nothing).

The chevron is now a base64-SVG caret on .ts-wrapper::after with z-index: 2. A
CSS content-glyph escape and a raw (non-base64) data URI both broke in the CSS
build, and the injected icon-font element never painted; base64 + z-index is
robust. Reverted the JS icon injection. Verified at the pixel level (darkest
pixel 0.45 = slate-500). new and edit specs green.

The contact-types chevron now uses the exact Bootstrap-Icons chevron-down shape
as a base64 SVG, sized (text-xs) and placed (right-3) like the single-selects.
Pixel-verified: both chevrons have an identical 8x4px dark extent.

design.md and CLAUDE.md: the multiselect chevron matches the single-selects, and
before finishing a component, check it against design.md and its siblings and
pixel-verify the match, not just that it renders.

… case

The app-shipped default contact types (ContactTypeGroup::DEFAULT_CONTACT_TYPE_GROUPS),
which render as the multiselect chips, are now sentence case, keeping the proper
nouns/acronyms CASA and IEP. design.md and CLAUDE.md now record that sentence case
covers app-shipped content (seed defaults and constants), not just view copy, so
scan those before finishing; never force-case free-form org data.

Existing orgs keep their data; re-seed to see the new defaults in dev.

- design-todo.md: save the scoped volunteer edit page migration plan at the top
  (resume-here) and check off the CaseContact occurred_at flake (already a lambda).
- Delete the orphaned casa_cases/_generate_report_modal (Case show uses the Dialog
  report modal; the live report generation lives in case_court_reports / reports).

The cases filter chevron/search/clear icons and the index/show menu leading icons
were slate-400 (2.56:1, below the 3:1 UI floor and against design.md's slate-500
chevron rule). Now slate-500 (4.76:1). Decorative empty-state / notification icon
tiles left as-is.